<template>
  <div class="sidebar-container">
    <el-aside :width="isCollapse ? '64px' : '260px'" class="aside" :class="{ 'show': isMobileMenuOpen }">
      <div class="profile" v-show="!isCollapse">
        <el-avatar :size="64" icon="el-icon-user-solid" />
        <div class="profile-name">姓名</div>
        <div class="profile-id">学号:2024413***</div>
      </div>
      <el-menu 
        class="menu" 
        :default-active="activeMenu" 
        router
        :collapse="isCollapse"
        @select="handleSelect"
      >
        <el-menu-item index="display">
          <i class="el-icon-s-data"></i>
          <template #title>成果展示</template>
        </el-menu-item>
        <el-menu-item index="manage">
          <i class="el-icon-folder"></i>
          <template #title>成果管理</template>
        </el-menu-item>
      
        <el-menu-item index="logout">
          <i class="el-icon-switch-button"></i>
          <template #title>退出账号</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <div class="collapse-btn" @click="toggleCollapse" v-if="!isMobile">
      <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </div>
    <div class="mobile-menu-btn" @click="toggleMobileMenu" v-if="isMobile">
      <i :class="isMobileMenuOpen ? 'el-icon-close' : 'el-icon-menu'"></i>
    </div>
    <div class="mobile-mask" v-if="isMobile && isMobileMenuOpen" @click="toggleMobileMenu"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const activeMenu = ref(route.path.includes('manage') ? 'manage' : 'display')
const isCollapse = ref(false)
const isMobile = ref(false)
const isMobileMenuOpen = ref(false)

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
  if (isMobile.value) {
    isCollapse.value = false
  }
}

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
  if (isMobileMenuOpen.value) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
}

const handleSelect = (index) => {
  activeMenu.value = index
  if (isMobile.value) {
    toggleMobileMenu()
  }
  if (index === 'logout') {
    ElMessageBox.confirm(
      '确定要退出账号吗？',
      '退出确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        customClass: 'logout-messagebox',
        draggable: true,
      }
    ).then(() => {
      // 这里可以添加退出登录的逻辑，如清除token、跳转登录页等
      // router.push('/login')
    }).catch(() => {})
  } else {
    if (index === 'display') router.push('/display')
    else if (index === 'manage') router.push('/manage')
  }
}

watch(() => route.path, (val) => {
  activeMenu.value = val.includes('manage') ? 'manage' : 'display'
})

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
  document.body.style.overflow = ''
})
</script>

<style scoped>
.sidebar-container {
  position: relative;
  height: 100%;
}

.aside {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  padding: 24px 16px;
  transition: all 0.3s ease;
  height: 100%;
}

.profile {
  text-align: center;
  margin-bottom: 32px;
  padding: 16px;
  background: rgba(122, 193, 67, 0.05);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.profile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(122, 193, 67, 0.1);
}

.profile-name {
  font-size: 22px;
  color: #7ac143;
  font-weight: bold;
  margin-top: 12px;
}

.profile-id {
  color: #666;
  margin-top: 6px;
  font-size: 16px;
}

.menu {
  border: none;
  background: transparent;
}

.menu .el-menu-item.is-active {
  background: linear-gradient(90deg, #7ac143 0%, #8edc5a 100%) !important;
  color: #fff !important;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(122, 193, 67, 0.2);
}

.menu .el-menu-item {
  border-radius: 12px;
  margin: 8px 4px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.menu .el-menu-item:hover {
  background: rgba(122, 193, 67, 0.1) !important;
  transform: translateX(4px);
}

.collapse-btn {
  position: absolute;
  right: -12px;
  top: 20px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
  transition: all 0.3s ease;
}

.collapse-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mobile-menu-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mobile-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .aside {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .aside.show {
    transform: translateX(0);
  }
  
  .collapse-btn {
    display: none;
  }
}

.logout-messagebox .el-message-box {
  width: 400px;
  min-height: 180px;
  font-size: 20px;
}
</style> 